<template>
  <div>
    <page-dialog
      :title="dialogInfo.title"
      v-model:visible="shows"
      :width="dialogInfo.width"
      :bt-list="dialogInfo.btList"
    >
      <!--左右布局-->
      <!-- 条件栏 -->
      <div class="layui-row">
        <div class="layui-col-md6">
          <page-filter
            v-model:query="filterInfo.query"
            :filter-list="filterInfo.list"
          />
          <page-table
            ref="leftTable"
            :refresh="tableInfo.refresh"
            :init-curpage="tableInfo.initCurpage"
            v-model:data="tableInfo.data"
            :api="api"
            :listen-height="false"
            :query="filterInfo.query"
            :field-list="tableInfo.fieldList"
            :handle="tableInfo.handle"
            :highlight-row="highlightRow"
            :check-box="checkBox"
            :checkedList="
              checkBox ? tableRightInfo.data.map((item) => item.id) : []
            "
            @handleEvent="handleEvent"
          >
          </page-table>
        </div>
        <div
          class="layui-col-md6 SelectProductAddPriceRight"
          style="padding-left: 20px"
        >
          <p style="line-height: 42px" class="slip-edit">已选人员</p>

          <page-table
            :refresh="tableRightInfo.refresh"
            :init-curpage="tableRightInfo.initCurpage"
            :api="tableRightInfo.api"
            :query="tableRightInfo.query"
            v-model:data="tableRightInfo.data"
            :check-box="false"
            :listen-height="false"
            :tab-index="true"
            :field-list="tableRightInfo.fieldList"
            :pager="false"
          >
          </page-table>
        </div>
      </div>
    </page-dialog>
  </div>
</template>

<script setup name="selectUserForRole">
import PageDialog from "../PageDialog/index";
import PageTable from "../DialogTable/index";
import PageFilter from "../PageFilter/index";
import { getRrgUserList, getRrgUserAll } from "@/api/base.js";
import { getDeptAll } from "@/api/core";
const { proxy } = getCurrentInstance();
const emits = defineEmits();
const props = defineProps({
  highlightRow: {
    type: Boolean,
    default: false,
  },
  checkBox: {
    type: Boolean,
    default: true,
  },
  api: {
    type: Function,
    default: getRrgUserList,
  },
  showDialog: {
    type: Boolean,
    default: false,
  },
  query: {
    type: Object,
    default: function () {
      return {};
    },
  },
  roleId: {
    type: Number,
  },
});

// 过滤相关配置
const filterInfo = ref({
  query: {
    sort: "create_time desc",
    status: 1,
    ...props.query,
  },
  list: [
    {
      type: "input",
      label: "名称",
      value: "nameLike",
      event: search,
    },
    {
      label: "部门",
      value: "deptId",
      query: {
        status: 1,
      },
      api: getDeptAll,
      type: "slip-select",
      event: search,
    },
    { type: "button", label: "搜索", event: search },
  ],
});
// 表格相关
const tableInfo = ref({
  refresh: 1,
  initCurpage: 1,
  data: [],
  fieldList: [
    { label: "工号", value: "userName" },
    { label: "名称", value: "name" },
    {
      label: "部门",
      value: "deptName",
    },
    { label: "性别", value: "sexValue" },
  ],
});
const tableRightInfo = ref({
  refresh: 1,
  initCurpage: 1,
  api: getRrgUserAll,
  query: {
    roleId: props.roleId,
  },
  data: [],
  fieldList: [
    { label: "工号", value: "userName" },
    { label: "名称", value: "name" },
    {
      label: "部门",
      value: "deptName",
    },
    { label: "性别", value: "sexValue" },
  ],
});
// 弹窗相关
const dialogInfo = ref({
  title: "选择人员",
  width: "85%",
  btLoading: false,
  btList: [
    { label: "关闭", event: handleClose, show: true },
    {
      label: "保存",
      type: "primary",
      event: save,
      show: true,
    },
  ],
});
const shows = computed({
  get() {
    return props.showDialog;
  },
  set(newValue) {
    emits("update:showDialog", newValue); // 更新父组件shows
  },
});
// 获取列表
function getList() {
  tableInfo.value.refresh = Math.random();
}
function getRightList() {
  tableRightInfo.value.refresh = Math.random();
}
function search() {
    tableInfo.value.initCurpage = Math.random()
  tableInfo.value.refresh = Math.random()
}
function save() {
  if (tableRightInfo.value.data.length) {
    handleClose();
    emits("callback", tableRightInfo.value.data);
  } else {
    handleClose();
    emits("callback", []);
  }
}
function handleEvent(event, data) {
  switch (event) {
    case "tableCheck":
      let ids = [];
      let idsNot = [];
      ids = data.map((item) => item.id); //当前页面选中行的id
      idsNot = tableInfo.value.data.filter((el) => !ids.includes(el.id)); //当前页面没选中的id
      idsNot = idsNot.map((item) => item.id);
      proxy.$nextTick(() => {
        tableRightInfo.value.data = tableRightInfo.value.data.filter(
          (item) => !idsNot.includes(item.id)
        );
        let tableIds = tableRightInfo.value.data.map((item) => item.id);
        data.forEach((item) => {
          if (!tableIds.includes(item.id)) {
            tableRightInfo.value.data.unshift(item);
          }
        });
        tableRightInfo.value.data = proxy.$fn.getSort(
          tableRightInfo.value.data,
          "id"
        );
      });
      break;
  }
}
// 关闭弹窗前的回调
function handleClose() {
  shows.value = false;
  emits("reset");
}

onMounted(() => {
  // hack, 在table创建出来之后再去调用
  proxy.$nextTick(() => {
    getRightList();
    getList();
  });
});
</script>

<style scoped></style>
